<template>

  <div class="employee-container">

    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>公司职员</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>


    <el-row>
      <el-form label-width="80px">
        <el-row>

          <el-col :span="8">
            <el-form-item label="口令" label-width="80px">
              <el-input size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户管理" label-width="80px">
              <el-input size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item>
              <el-button type="success">搜索</el-button>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-row>


    <el-row>

      <div>
        <el-button-group>
          <el-button @click="btnAddClick" type="primary" icon="el-icon-user">ADD</el-button>
          <el-button @click="" type="primary" icon="el-icon-circle-plus-outline">UPDATE</el-button>
          <el-button @click="btnDeleteClick" type="primary" icon="el-icon-delete">DELETE</el-button>
        </el-button-group>
      </div>

      <el-table :data="tableData" border stripe style="width:100%" >
        <el-table-column prop="id" label="ID" width="180" sortable></el-table-column>
        <el-table-column prop="name" label="昵称" ></el-table-column>
        <el-table-column prop="dan" label="用户等级"></el-table-column>
        <el-table-column prop="date" label="入会时间" width="180"></el-table-column>
      </el-table>

      <el-pagination small layout="prev,pager,next" :total="50"></el-pagination>

    </el-row>



<!--    client的添加功能-->
    <el-dialog title="client_add" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

      <el-form>

        <el-form-group>
          <el-form-item label = "client_id" label-width="100px">
            <el-input type="text" v-model="client.id"></el-input>
          </el-form-item>
        </el-form-group>

        <el-form-group>
          <el-form-item label = "client_name" label-width="100px">
            <el-input type="text" v-model="client.name"></el-input>
          </el-form-item>
        </el-form-group>

        <el-form-group>
          <el-form-item label = "client_dan" label-width="100px">
            <el-input type="text" v-model="client.dan"></el-input>
          </el-form-item>
        </el-form-group>

        <el-form-group>
          <el-form-item label = "client_date" label-width="100px">
            <el-input type="text" v-model="client.date"></el-input>
          </el-form-item>
        </el-form-group>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">cancel</el-button>
        <el-button type="primary" @click="submitHandle">determine</el-button>
      </span>

    </el-dialog>



<!--    client的删除功能-->
    <el-dialog title="client_delete" :visible.sync="dialogVisible_d" width="30%" :before-close="handleClose_d">

      <el-form>
        <el-form-group>
          <el-form-item label = "client_id" label-width="100px">
            <el-input type="text" v-model="client.id" placeholder="请输入删除对象的ID"></el-input>
          </el-form-item>
        </el-form-group>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_d = false">cancel</el-button>
        <el-button type="danger" @click="deleteHandle">determine</el-button>
      </span>

    </el-dialog>





  </div>

</template>


<script>
  export default {
    name: "client",
    data(){
      return{
        tableData:[],
        dialogVisible:false ,
        dialogVisible_d:false ,
        client : {
          id:'' ,
          name:'' ,
          dan:'' ,
          date:''
        }
      }
    },
    mounted(){
      /*挂载结束之后*/
      this.initTable();
      this.getTableData() ;

    } ,
    methods:{

      //有关add
      btnAddClick(){
        this.dialogVisible = true ;
      } ,
      handleClose(){
        this.dialogVisible = false ;
      } ,
      submitHandle(){
        var this_1 = this ;
        this.axios({
          // url:'http://localhost:3000/client/add' ,
          url:'http://127.0.0.1:3000/lxtsql/add' ,
          method:'get' ,
          params:{
            id: this.client.id ,
            name:this.client.name ,
            dan: this.client.dan ,
            date: this.client.date
          }
        }).then(function(res){
          if(res.data.flag) {
            this_1.tableData = res.data.client_add;
            this_1.$message('add successfully !') ;
            this_1.dialogVisible = false;
          }else{
            alert('add unsuccessfully !')
          }
        })
      } ,

      //有关delete
      btnDeleteClick(){
        this.dialogVisible_d = true ;
      } ,
      handleClose_d(){
        this.dialogVisible_d = false ;
      } ,
      deleteHandle(){
        var this_1 = this ;
        this.axios({
          url:'http://127.0.0.1:3000/lxtsql/delete' ,
          method : 'get' ,
          params :{
            id : this.client.id
          }
        }).then(function (res) {
          if(res.data.flag){
            this_1.tableData = res.data.client_delete ;
            this_1.$message('delete successfully QAQ') ;
            this_1.dialogVisible_d = false ;
          }else{
            alert('delete unsuccessfully ^^')
          }
        })
      } ,

      //有关数组获取
      getTableData: function() {
        var that = this ;
        this.axios({
          url:'http://127.0.0.1:3000/lxtsql/list' ,
          method:'get' ,
        }).then(function (res) {
          that.tableData = res.data.clis ;
        })
      } ,

      initTable: function () {
        var _this = this;
        this.axios({
          url: 'http://localhost:3000/client/add',
          method: 'get'
        }).then(function (res) {
          _this.tableData = res.data;
        })
      }

    }
  }
</script>

<style scoped>

</style>
